import React,{useState,useEffect} from "react";
import {StyleSheet,Text,View,ScrollView} from 'react-native';
import Headers from '@/Components/header/Headers';
import DeviceInfo from 'react-native-device-info';
import ImageScreen from '@/Components/Image/ImageScreen';
import ImageBackgroundScreen from '@/Components/Image/ImageBackgroundScreen';
import {userList} from './usehooks';
import {pTx} from '@/utils/size';
import {SafeAreaView} from 'react-native-safe-area-context'
import Swiper from 'react-native-swiper'
let AboutMeScreen = (props:any)=>{
    let [version,setVersion] = useState('1.0.0');
    let [appName,setAppName] = useState('帮办管家');
    let [tabIndex,setTabIndex] = useState(0);
    let [barStyle,setBarStyle] = useState(1);
    let [backgroundColor,setBackgroundColor] = useState('rgba(0,0,0,0)');
    let [centerColor,setCenterColor] = useState('#fff');

    let [list,setList] = useState(userList());
    useEffect(()=>{
        setVersion(DeviceInfo.getVersion());
        setAppName(DeviceInfo.getApplicationName());
        // console.log('list----:',list);
    },[])

    function onchange(event){
        let offettop = event.nativeEvent.contentOffset.y;
        if(offettop>60){
            setBackgroundColor('rgba(255,255,255,1)');
            setBarStyle(0);
            setCenterColor('#444');
        }else{
            setBackgroundColor('rgba(255,255,255,'+offettop/60+')');
            setBarStyle(1);
            setCenterColor('#fff');
        }
    }

    function onClickRightBtn(){
        console.log('升级规则');
    }

    function onSwiperChange(data){
        setTabIndex(data);
    }

    return(
        <View style={[styles.container,{backgroundColor:list[tabIndex].getInitialswipebgColor}]}>
            <View style={styles.headerbox}>
                <Headers
                    title={'星际旅客'}
                    border={false}
                    barStyle={barStyle}
                    leftIcon={require('@/assess/images/icon/back.png')}
                    backgroundColor={backgroundColor}
                    centerColor={centerColor}
                    rightTitle='升级规则'
                    rightColor={centerColor}
                    onClickRightBtn={()=>onClickRightBtn()}
                    {...props}
                />
            </View>
            <ScrollView style={{flex: 1,}} scrollEventThrottle = {200} onScroll={(event)=>{
                onchange(event);
            }}>
                <View style={styles.topbgbox}>
                    
                        <ImageBackgroundScreen width={pTx(750)} source={list[tabIndex].topbg}>
                            <Swiper showsButtons={false} loop={false} index={tabIndex} showsPagination={false} onIndexChanged={(data)=>{
                                onSwiperChange(data);
                            }}>
                                {list.map((item,index)=>{
                                    return (
                                        <View key={index}>
                                            <View style={styles.feijibox}>
                                                <ImageScreen width={pTx(498)}  source={item.feiji}/>
                                            </View>
                                            <View style={styles.jingyanbox}>
                                                <View style={styles.jingyanbodybox}>
                                                    <Text style={{fontSize:pTx(24),color:'#fff',fontWeight:'400'}}>活跃经验值200/3000</Text>
                                                </View>
                                            </View>
                                        </View>
                                    )
                                })}
                            </Swiper>
                            <View style={styles.quanyibox}>
                                <Text style={{fontSize:pTx(32),color:'#fff',fontWeight:'500'}}>我的星级权益</Text>
                            </View>
                        </ImageBackgroundScreen>
                  
                </View>
                <View style={styles.quanyilistbox}>
                    {list[tabIndex].quanyilist.map((item,index)=>{
                        return (
                            <View style={styles.quanyilistitembox} key={index}>
                                <ImageScreen width={pTx(88)}  source={item.path}/>
                                <Text style={styles.quanyilistitemname}>{item.name}</Text>
                                <Text style={styles.quanyilistitemdesc}>{item.desc}</Text>
                            </View>
                        )
                    })}
                </View>
                <View style={styles.vipcardbox}>
                    <View style={styles.vipcardbiaojibox}>
                        <View style={styles.vipcardbiaoji}></View>
                    </View>
                    <SafeAreaView 
                        style={{ flex: 1, backgroundColor:'#ffffff'}} 
                        edges={['bottom']}
                        mode="padding"
                    >
                        <View style={styles.vipcardbodybox}>
                            <View style={styles.vipcardbodyleftbox}>
                                <ImageBackgroundScreen width={pTx(337)} source={require('@/assess/images/xingjilvke/kaitonghuiyuanbg.png')}>

                                </ImageBackgroundScreen>
                            </View>
                            <View>
                            <View style={styles.vipcardbodyrighttopbox}>
                                    <ImageBackgroundScreen width={pTx(337)} source={require('@/assess/images/xingjilvke/lichengshangcheng.png')}>
                                        
                                    </ImageBackgroundScreen>
                                </View>
                                <View>
                                    <ImageBackgroundScreen width={pTx(337)} source={require('@/assess/images/xingjilvke/shengriheka.png')}>
                                        
                                    </ImageBackgroundScreen>
                                </View>
                            </View>
                        </View>
                    </SafeAreaView>
                </View>
            </ScrollView>    
        </View>
    )
};

const styles = StyleSheet.create({
    container:{
        flex: 1,
        flexDirection:'column',
        position:'relative',
        overflow:'hidden'
    },
    headerbox:{
        position:'absolute',
        zIndex:9999,
        elevation:9999,
        left:0,
        right:0
    },
    bodybox:{
        flex: 1,
        flexDirection:'column',
        alignItems:'center'
    },
    topbgbox:{
        width:pTx(750),
        height:pTx(710)
    },
    feijibox:{
        flexDirection:'column',
        alignItems:'center',
        marginTop:pTx(233)
    },
    jingyanbox:{
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        marginTop:pTx(34)
    },
    jingyanbodybox:{
        height:pTx(44),
        borderRadius:pTx(22),
        backgroundColor:'rgba(255,255,255,0.15)',
        paddingLeft:pTx(18),
        paddingRight:pTx(18),
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
    },
    quanyibox:{
        marginLeft:pTx(33),
        marginTop:pTx(22)
    },
    quanyilistbox:{
        flexDirection:"row",
        flexWrap:'wrap',
        marginTop:pTx(32),
        marginLeft:pTx(23),
        marginRight:pTx(23)
    },
    quanyilistitembox:{
        width:'25%',
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'center',
        marginBottom:pTx(40)
    },
    quanyilistitemname:{
        marginTop:pTx(16),
        marginBottom:pTx(7),
        fontSize:pTx(24),
        lineHeight:pTx(24),
        fontWeight:'400',
        color:'#fff'
    },
    quanyilistitemdesc:{
        fontSize:pTx(24),
        lineHeight:pTx(24),
        fontWeight:'400',
        color:'rgba(255,255,255,0.4)'
    },
    vipcardbox:{
        backgroundColor:'#fff',
        width:pTx(750),
        borderTopLeftRadius:pTx(32),
        borderTopRightRadius:pTx(32)
    },
    vipcardbiaoji:{
        width:pTx(53),
        height:pTx(8),
        backgroundColor:'rgba(0,0,0,0.2)'
    },
    vipcardbodybox:{
        flexDirection:'row',
        alignItems:"center",
        paddingLeft:pTx(32),
        paddingRight:pTx(32),
        paddingBottom:pTx(20),
    },
    vipcardbodyleftbox:{
        marginRight:pTx(12)
    },
    vipcardbiaojibox:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        paddingTop:pTx(16),
        paddingBottom:pTx(32)
    },
    vipcardbodyrighttopbox:{
        marginBottom:pTx(12)
    }
})

export default AboutMeScreen;

